<script setup lang='ts'>
  import { reactive } from 'vue';
  import { auditApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import xmImage from '@/components/xmImage/index.vue'
  import { ElMessageBox } from 'element-plus';
  const $emit = defineEmits(['updateList','closeChange'])
  const action = reactive({
    dialogFormVisible:false,
    screenPages:[] as Array<any>,
    userinfo:{
      nickname:'',
      portrait:'',
      user_id:'',
      uuid:'',
    },
    content_id:0,
    create_timestamp:'',
    c_content:'',
    c_video:'',
    audit_count:-1,
    audit_status:-1,
    audit_total:0,
    auditCountArr:[] as Array<string>,
    auditStatusArr:[] as Array<string>,
    imageList:[] as Array<string>,
    trendsIndex:-1, // 列表中选中的下标
    listLength:0 // 列表长度
  })

  const handlePass = (state:number,text:string)=>{
    ElMessageBox.confirm(`确定执行${ text }此操作吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading()
      await auditApi.auditTrends(action.content_id,{state})
      $emit('updateList')
      ToastSuccess('操作成功')
      loading.close()
    })
    .catch(() => {});
  }
  const handleDelTrends = (is_forbid:number,text:string)=>{
    ElMessageBox.confirm(`确定执行${ text }此操作吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading()
      await auditApi.deleteTrend(action.content_id,{
        is_forbid,
        user_id:action.userinfo.user_id
      })
      closeDialog()
      $emit('closeChange','update')
      ToastSuccess('操作成功')
      loading.close()
    })
    .catch(() => {});
  }
  const openDialog = async(query:any = {})=> {
    const {
      index = -1, listLengthNum=0,
      user={}, create_timestamp='', auditCountArr=[],auditStatusArr=[],
      audit_count=-1, audit_status=-1, c_content='', c_video='', c_imgs=[], audit_total=0,
      content_id=0
    } = query
    action.trendsIndex = index
    action.listLength = listLengthNum
    action.content_id = content_id
    action.auditCountArr = auditCountArr
    action.auditStatusArr = auditStatusArr
    action.audit_count = audit_count
    action.c_content = c_content
    action.c_video = c_video
    action.audit_status = audit_status
    action.imageList = c_imgs
    action.audit_total = audit_total
    action.userinfo = user
    action.create_timestamp = create_timestamp
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
  }
  const handleClose = (done: () => void)=>{
    done()
    $emit('closeChange')
  }
  const handleNext = (type:number = 0)=>{
    if(!type || typeof(type) != 'number' ) return console.error('type 1 || -1 : number')
    const num = action.trendsIndex + type
    if(num < 0) return ToastWarning('当前页已无上一条动态')
    if(num >= action.listLength) return ToastWarning('当前页已无下一条动态')
    action.trendsIndex = num
    closeDialog()
    const timeOut = setTimeout(()=>{
      $emit('closeChange','next',num)
      clearTimeout(timeOut)
    },280)
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog xm-dialog-cont-y"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      :before-close="handleClose"
      title="审核动态">
      <div class="flex-align xm-mb20">
        <div class="flex-align">审核进度：
          <el-tag
              :type="action.audit_count == 2?'success':''"
            >
            {{ action.auditCountArr[action.audit_count] }}
          </el-tag>
        </div>
        <div class="xm-ml10 flex-align">审核状态：
          <el-tag
            :type="['danger','success','',''][action.audit_status]"
          >
          {{ action.auditStatusArr[action.audit_status] }}
          </el-tag>
        </div>
        <div class="xm-ml10" style="color: red;">
          待审核：{{ action.audit_total }}
        </div>
        <div class="xm-mrAuto">
          <el-button @click="handleNext(-1)" text type="primary" >上一条</el-button>
          {{ action.trendsIndex+1 }} / {{ action.listLength }}
          <el-button class="xm-ml0" @click="handleNext(1)" text type="primary" >下一条</el-button>
        </div>
      </div>
      <!-- 用户信息 / 审核操作 -->
      <div class="flex">
        <div class="textBack">
          <div class="userinfo flex-align">
            <img :src="action.userinfo.portrait" class="portrait">
            <div>
              <div class="uuid">UUID：{{ action.userinfo.uuid }}</div>
              <div class="nickname">用户昵称：{{ action.userinfo.nickname }}</div>
            </div>
          </div>
          <div class="timeText">发布时间：{{ action.create_timestamp }}</div>
        </div>
        <div class="butList xm-mrAuto">
          <div v-if="action.audit_count < 2" class="xm-mb10" v-rule="'trends_audittrend'">
            <el-button
              v-if="action.audit_count == 0"
              type="primary"
              @click="handlePass(1,'初审通过')"
            >初审通过</el-button>
            <template v-if="action.audit_count == 1 ">
              <el-button
                v-if="action.audit_status == 1"
                type="primary"
                @click="handlePass(1,'复审通过')"
              >复审通过</el-button>
              <el-button
                v-if="action.audit_status == 0"
                type="primary"
                @click="handlePass(1,'复审已阅')"
              >复审已阅</el-button>
            </template>
            <el-button
              v-if="action.audit_count < 2 && action.audit_status !== 0 "
              type="primary"
              @click="handlePass(0,'驳回动态')"
            >驳回动态</el-button>
          </div>
          <div v-rule="'trends_destroy'">
            <el-button type="danger" @click="handleDelTrends(1,'删除动态')">删除动态</el-button>
            <el-button type="danger" @click="handleDelTrends(0,'删除并永久封号')">删除并永久封号</el-button>
          </div>
        </div>
      </div>
      <!-- 文案 / 图片 -->
      <div class="flex xm-mt10" style="width: 100%;">
        <dl class="textBack trendsText">
          <dt>发布内容：</dt>
          <dd>{{ action.c_content }}</dd>
        </dl>
        <div class="textBack imagesList">
          <xmImage v-for="item in action.imageList" :src="item" :list="[item]" />
          <video v-if="action.c_video" :src=action.c_video controls style="width: 100%;height: auto;">
            <!-- <source  type="video/mp4"> -->
          </video>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .textBack {
    width: max-content;
    min-width: 325px;
    max-width: 325px;
    min-height: 120px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #f2f2f2;
  }
  .userinfo {
    margin-bottom: 10px;
    .portrait {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      border-radius: 100%;
      overflow: hidden;
    }
    .uuid {
      font-size: 13px;
    }
    .nickname {
      font-size: 15px;
    }
  }
  .timeText {
    width: 100%;
    text-align: right;
  }
  .trendsText {
    margin: 0 10px 0 0;
    dd {
      overflow-y: auto;
      height: 240px;
      margin: 0;
      text-indent:20px;
    }
  }
  .butList {

  }
  .imagesList {
    overflow-y: auto;
    max-width: 100%;
    flex: 1;
    height: 290px;
    display: grid;
    grid-template-columns: repeat(4 ,140px);
    grid-gap: 20px 12px;
    .el-image {
      width: 140px;
      height: 140px;
    }
  }
</style>